import React, { useMemo, useEffect, useState } from 'react';
import s from './style.module.css';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
import Table from '@knownsec/react-component/dist/Table';
import EmptyData from '../../../../../components/empty/EmptyData';
import Pagination from '@knownsec/react-component/dist/Pagination';
import {
	getParams,
	turnToUrlparam,
	GetQueryString,
} from '../../../../../helpers/getUrlParams';
import cn from 'classnames';
import { Link } from 'react-router-dom';
import Button from '@kuiper-components/button';
import Input from '@kuiper-components/input';
import Icon from '@knownsec/react-component/dist/Icon';
import fetchFer from 'API/fetch';
import Select, { Option } from '@kuiper-components/select';
import { Search24 as SearchIcon } from '@carbon/icons-react';
import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../../common/constants';
import NewTable from '../../../../Content/Detail/Table/NewTable';
import { cloneDeep } from 'lodash';
import moment from 'moment';

const defaultFilter = {
	page: 1,
	limit: 10,
};
let setT = null;
function Detail({
	match: {
		params: { assetType, jid },
	},
	location,
	tid,
	jobId,
	target,
	atid,
	checked,
	taskType,
	isHistory,
	isSchedule,
	targetStatusTableTip,
	webDataLoading,
	enableTaskType,
	changeOverview
}) {
	const id = GetQueryString(location.search, 'id');
	const resD = JSON.parse(sessionStorage.resD).feature;
	const type = ['keyword', 'privacy_disclosure'];
	const tp = 'img';
	const [data, setData] = React.useState([]);
	const [loading, setLoading] = useState(false);
	const job = { cydEnabled: false };
	const [tableData, setTableData] = useState({
		keyword: [],
		privacy_disclosure: [],
	});
	const [tableLoading, setTableLoading] = React.useState(false);
	const [refresh, setRefresh] = useState(false)
	const getData = () => {
		const resultData = {
			keyword: [],
			privacy_disclosure: [],
		};
		data?.warnings?.map(item => {
			const a = cloneDeep(item);
			a.tid = data.task_id;
			a.key = a._id
			resultData[item.category].push(a);
		});
		setTableData(resultData);
		setRefresh(false)
	};
	const getDetailNew = async () => {
		if (!tid) return false
		setTableLoading(true);
		const sendData1 = {
			task_id: tid,
		};
		const params1 = turnToUrlparam(sendData1);
		const res2 = await fetchFer(
			`/api/v2/tasks/web_security/type/detail?${params1}`,
			{
				method: 'GET',
				checkStatus: 501,
			}
		);
		if (res2.code === 200) {
			setData(res2.data);
		}
		setTableLoading(false);
	};
	const checkData = () => {
		let text = '暂无数据';
		let img = 'noData';
		if (!tid) {
			if (!resD.contentTask && !resD.contentManualTask) {
				text = '当前套餐不支持该监测项，请先升级套餐。';
				img = 'noPrmission';
			} else if (checked === 0) {
				text = (
					<span>
						该资产未启用该监测项，您可前往“任务管理 -
						<Link
							to={{
								pathname: '/job-manage/create-job-all',
								search: `assetType=web&jid=${jobId}&isSchedule=${isSchedule}`,
							}}
						>
							Web安全监测
						</Link>
						”下发监测任务。
					</span>
				);
				img = 'dataLoading';
			} else if (tid === false) {
				text = '任务数据已过期，您可重新下发监测任务'
			}
		} else {
			return targetStatusTableTip(data, '内容违规')
		}
		return { img, text };
	};
	useEffect(() => {
		getDetailNew();
	}, [tid]);
	useEffect(() => {
		getData();
	}, [data]);
	useEffect(() => {
		if (refresh) {
			changeOverview(true)
			getDetailNew()
		}
	}, [refresh])

	const refetch = () => {};
	return (
		<div className={s.tableMain}>
			<div className={cn(s.flex, s.aic, s.mb20)}>
			最近更新时间：
				<span className={cn(s.pl10, s.pr20)}>
					{Object.keys(data).length === 0
						? '- -'
						: moment(data?.time_info?.end_time).format('YYYY-MM-DD HH:mm:ss')}
				</span>
				{/* <Link
					to={{
						pathname: '/job-manage/web-task',
						search: `filter=${encodeURI(
							JSON.stringify({ target_url: target })
						)}`,
					}}
				>
					查看任务
				</Link> */}
			</div>
			{type.map(item => (
				<NewTable
					className={s.mb20}
					id={id}
					key={item}
					notStatus={false}
					category={item}
					isModified={true}
					linkType="manageWeb"
					loading={tableLoading}
					cydEnabled={job?.cydEnabled}
					taskId={data?.task_id}
					tableData={tableData[item]}
					refetch={refetch}
					refresh={setRefresh}
					atid={atid}
					taskType={taskType}
					isHistory={isHistory}
					empty={
						<EmptyData
							emptyType={checkData().img}
							text={checkData().text}
							type={tp}
							className={s.nobor}
						/>
					}
				/>
			))}
		</div>
	);
}
Detail.propTypes = {
	tid: PropTypes.any,
	atid: PropTypes.any,
	match: PropTypes.shape({
		params: PropTypes.shape({
			assetType: PropTypes.string.isRequired,
		}).isRequired,
	}).isRequired,
};
export default withRouter(Detail);
